<template>
    <div class="poker-strategy-table">
        <poker-strategy-filter
            @filterChange="handleFilterChange"
            @filterSuitChange="handleFilterSuitChange"
            @filterPairChange="handleFilterPairChange"
            @firstCardChange="handleFirstCardChange"
            @secondCardChange="handleSecondCardChange"
            @thirdCardChange="handleThirdCardChange"
            @totalCardNumChange="handleTotalCardNumChange"
            @connectNumChange="handleConnectNumChange"
            @minConnectNumChange="handleMinConnectNumChange"
            @maxConnectNumChange="handleMaxConnectNumChange"
        ></poker-strategy-filter>
        <div class="bet-summary-bar">
            <div class="bet-summary-desc">
                <div
                    class="bet-summary-item"
                    v-for="item of flopStrategiesSummary"
                    :key="item.title"
                >
                    {{ item.title }} : {{ item.value }}
                </div>
            </div>
            <el-button
                @click="handleGenerateReport"
                :disabled="selectedBoard.length === 0"
                >生成分析报告</el-button
            >
        </div>

        <div class="table-wrapper">
            <el-table
                :data="flopStrategies"
                height="100%"
                @selection-change="handleSelectionChange"
                :header-cell-style="{'text-align':'left'}"

            >
                <el-table-column
                    type="selection"
                    width="45"
                    :selectable="boardSelectable"
                >
                </el-table-column>
                <el-table-column
                    v-for="item of strategies.table_column"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.title"
                    :width="getColumnWidth(item.prop)"
                    sortable
                    :sort-method="item.prop == 'flop_board' ? sortMethod : null"
                >
                    <template slot-scope="scope">
                        <span v-if="item.prop !== 'flop_board'" class="prop-span">{{
                            scope.row[item.prop]
                        }}</span>
                        <div
                            v-else
                            v-html="getFlopBoardHtml(scope.row.flop_board)"
                        ></div>
                    </template>
                </el-table-column>
                <el-table-column label="查看详情" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="handStrategies[scope.row.flop_board]"
                            @click="handleCheckDetail(scope.row.flop_board)"
                            >查看</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import PokerStrategyFilter from "./poker-strategy-filter";
import {flopBoardHtml } from "@/utils/poker/poker-config";
export default {
    name: "PokerStrategyTable",
    components: {
        PokerStrategyFilter,
    },
    props: {
        strategies: {
            type: Object,
        },
        handStrategies: {
            type: Object,
        },
    },
    data() {
        return {
            cardMap: {
                A: 14,
                K: 13,
                Q: 12,
                J: 11,
                T: 10,
                9: 9,
                8: 8,
                7: 7,
                6: 6,
                5: 5,
                4: 4,
                3: 3,
                2: 2,
            },
            suitToNum: {
                s: 3,
                d: 2,
                c: 1,
                h: 0,
            },
            flopFilter: "",
            suitFilter: [1, 2, 3],
            pairFilter: [1, 2, 3],
            firstCardFilter: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
            secondCardFilter: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
            thirdCardFilter: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
            totalCardNumFilter: [6, 42],
            connectNumFilter: [0, 12],
            minConnectNumFilter: [0, 8],
            maxConnectNumFilter: [0, 11],
            selectedBoard: [],
        };
    },
    computed: {
        flopStrategies() {
            if (!this.flopFilter) {
                return this.strategies.flop_strategies.filter((item) => {
                    return (
                        this.suitFilter.includes(item.suits_num) &&
                        this.pairFilter.includes(item.card_num_differ) &&
                        this.firstCardFilter.includes(item.card_num_max) &&
                        this.secondCardFilter.includes(item.card_num_middle) &&
                        this.thirdCardFilter.includes(item.card_num_min) &&
                        item.card_total_num >= this.totalCardNumFilter[0] &&
                        item.card_total_num <= this.totalCardNumFilter[1] &&
                        item.card_connect_num >= this.connectNumFilter[0] &&
                        item.card_connect_num <= this.connectNumFilter[1] &&
                        item.card_connect_min >= this.minConnectNumFilter[0] &&
                        item.card_connect_min <= this.minConnectNumFilter[1] &&
                        item.card_connect_max >= this.maxConnectNumFilter[0] &&
                        item.card_connect_max <= this.maxConnectNumFilter[1]
                    );
                });
            } else {
                try {
                    let rule = new RegExp(this.flopFilter);
                    return this.strategies.flop_strategies.filter((item) => {
                        let flopString = `${item.flop_board[0]}${item.flop_board[2]}${item.flop_board[4]}`;
                        if (!rule.test(flopString)) return false;
                        return (
                            this.suitFilter.includes(item.suits_num) &&
                            this.pairFilter.includes(item.card_num_differ) &&
                            this.firstCardFilter.includes(item.card_num_max) &&
                            this.secondCardFilter.includes(
                                item.card_num_middle
                            ) &&
                            item.card_total_num >= this.totalCardNumFilter[0] &&
                            item.card_total_num <= this.totalCardNumFilter[1] &&
                            item.card_connect_num >= this.connectNumFilter[0] &&
                            item.card_connect_num <= this.connectNumFilter[1] &&
                            item.card_connect_min >=
                                this.minConnectNumFilter[0] &&
                            item.card_connect_min <=
                                this.minConnectNumFilter[1] &&
                            item.card_connect_max >=
                                this.maxConnectNumFilter[0] &&
                            item.card_connect_max <=
                                this.maxConnectNumFilter[1] &&
                            this.thirdCardFilter.includes(item.card_num_min)
                        );
                    });
                } catch (error) {
                    return this.strategies.flop_strategies;
                }
            }
        },
        flopStrategiesSummary() {
            let summary = [];
            summary.push({
                title: "翻牌总数",
                value: this.flopStrategies.length,
            });
            for (let i = 12; i < this.strategies.table_column.length; i++) {
                let value = 0;
                for (let item of this.flopStrategies) {
                    value += item[this.strategies.table_column[i].prop];
                }
                value = value / this.flopStrategies.length;
                summary.push({
                    title: this.strategies.table_column[i].title,
                    value: value.toFixed(2),
                });
            }

            return summary;
        },
    },
    methods: {
        getFlopBoardHtml(flopBoard) {
            return flopBoardHtml(flopBoard);
        },
        sortMethod(a, b) {
            let aConvert = `${this.cardMap[a[0]] * 4 + this.suitToNum[a[1]]}${
                this.cardMap[a[2]] * 4 + this.suitToNum[a[3]]
            }${this.cardMap[a[4]] * 4 + this.suitToNum[a[5]]}`;
            let bConvert = `${this.cardMap[b[0]] * 4 + this.suitToNum[b[1]]}${
                this.cardMap[b[2]] * 4 + this.suitToNum[b[3]]
            }${this.cardMap[b[4]] * 4 + this.suitToNum[b[5]]}`;
            if (aConvert > bConvert) {
                return 1;
            } else {
                return -1;
            }
        },
        handleFilterChange(val) {
            this.flopFilter = val;
        },
        handleFilterSuitChange(val) {
            this.suitFilter = val;
        },
        handleFilterPairChange(val) {
            this.pairFilter = val;
        },
        handleFirstCardChange(val) {
            this.firstCardFilter = val;
        },
        handleSecondCardChange(val) {
            this.secondCardFilter = val;
        },
        handleThirdCardChange(val) {
            this.thirdCardFilter = val;
        },
        handleTotalCardNumChange(val) {
            this.totalCardNumFilter = val;
        },
        handleConnectNumChange(val) {
            this.connectNumFilter = val;
        },
        handleMinConnectNumChange(val) {
            this.minConnectNumFilter = val;
        },
        handleMaxConnectNumChange(val) {
            this.maxConnectNumFilter = val;
        },
        handleCheckDetail(flop) {
            this.$emit("checkDetail", flop);
        },
        handleGenerateReport() {
            this.$emit("generateReport", this.selectedBoard);
        },
        handleSelectionChange(val) {
            this.selectedBoard = val.map((item) => {
                return item.flop_board;
            });
        },
        getColumnWidth(prop) {
            switch (prop) {
                case "card_connect_max":
                case "card_connect_min":
                    return "100px";
                case "card_num_min":
                case "card_num_max":
                case "card_num_middle":
                case "call":
                case "fold":
                case "raise_all_in":
                    return "75px";
                case "suits_num":
                case "card_num_differ":
                case "card_total_num":
                    return "86px";
                default:
                    break;
            }
            return "90px";
        },
        boardSelectable(row, index) {
            return this.handStrategies[row.flop_board];
        },
    },
};
</script>

<style lang="scss">
.poker-strategy-table {
    height: 100%;
    display: flex;
    flex-direction: column;

    .bet-summary-bar {
        display: flex;
        padding-left: 20px;
        padding-right: 10px;
        align-items: center;
        justify-content: space-between;
        .bet-summary-desc {
            display: flex;
            margin-right: 30px;

            .bet-summary-item {
                margin-right: 20px;
            }
        }
    }

    .table-wrapper {
        flex: 1;
        overflow: hidden;
        .el-table__row{
            height: 50px;
        }
    }
}
</style>
